<template>
  <div class="main">
    <div class="nav">
      <div class="nav_body">
        <div class="nav_left">
          <div class="nav_left_logo">
            <img src="../../images/logo.png" alt="" />
            <h1>共创云</h1>
          </div>
          <div class="nav_left_list">
            <ul>
              <li>服务产品</li>
              <li>科创需求</li>
              <li>专利论文</li>
              <li>交易大数据</li>
            </ul>
          </div>
        </div>
        <div class="nav_right">
          <el-button type="primary">登录</el-button>
          <el-button>注册</el-button>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="center_body">
        <div class="center_body_search">
          <div class="center_by_searchLeft">
            <img src="../../images/ziyuandating.png" alt="" />
            <p>资源大厅</p>
          </div>
          <div class="center_by_searchRight">
            <el-input
              v-model="input"
              placeholder="请输入资源名称或用户名搜索"
            />
            <el-button type="primary" :icon="Search" @click="bindSearch"
              >搜索</el-button
            >
          </div>
        </div>
        <div class="center_body_nav">
          <p>服务</p>
        </div>
        <div class="center_body_list">
          <div
            :class="
              ActiveList ? 'center_body_listA_Active' : 'center_body_listA'
            "
          >
            <div class="center_body_listA_tit">
              <p>服务类型：</p>
            </div>
            <ul>
              <li :class="{'activeCss':activeFW===index}" v-for="(item,index) in listA" :key="item.id" @click="bindFW(item.id,index)">
                {{ item.text }}
              </li>
            </ul>
            <div
              class="center_body_listA_gengduo"
              v-if="ActiveList"
              @click="bindNone(1)"
            >
              <p>收起</p>
            </div>
            <div class="center_body_listA_gengduo" v-else @click="bindBlock(1)">
              <p>更多</p>
            </div>
          </div>
          <div
            :class="
              ActiveListB ? 'center_body_listA_Active' : 'center_body_listA'
            "
          >
            <div class="center_body_listA_tit">
              <p>技术领域：</p>
            </div>
            <ul>
              <li :class="{'activeCss':activeJS===index}" v-for="(item,index) in listB" :key="item.id" @click="bindJS(item.id,index)">
                {{ item.text }}
              </li>
            </ul>
            <div
              class="center_body_listA_gengduo"
              v-if="ActiveListB"
              @click="bindNone(2)"
            >
              <p>收起</p>
            </div>
            <div class="center_body_listA_gengduo" v-else @click="bindBlock(2)">
              <p>更多</p>
            </div>
          </div>
          <div
            :class="
              ActiveListC ? 'center_body_listA_Active' : 'center_body_listA'
            "
          >
            <div class="center_body_listA_tit">
              <p>数据来源：</p>
            </div>
            <ul>
              <li :class="{'activeCss':activeSJ===index}" v-for="(item,index) in listC" :key="item.id" @click="bindSJ(item.id,index)">
                {{ item.text }}
              </li>
            </ul>
            <div
              class="center_body_listA_gengduo"
              v-if="ActiveListC"
              @click="bindNone(3)"
            >
              <p>收起</p>
            </div>
            <div class="center_body_listA_gengduo" v-else @click="bindBlock(3)">
              <p>更多</p>
            </div>
          </div>
          <div
            :class="
              ActiveListD ? 'center_body_listB_Active' : 'center_body_listB'
            "
          >
            <div class="center_body_listA_tit">
              <p>地区：</p>
            </div>
            <ul>
              <li :class="{'activeCss':activeaddress===index}" v-for="(item,index) in listD" :key="item.id" @click="bindAddress(item.text,index)">
                {{ item.text }}
              </li>
            </ul>
            <div
              class="center_body_listA_gengduo"
              v-if="ActiveListD"
              @click="bindNone(4)"
            >
              <p>收起</p>
            </div>
            <div class="center_body_listA_gengduo" v-else @click="bindBlock(4)">
              <p>更多</p>
            </div>
          </div>
        </div>
        <div class="center_body_table">
          <div class="center_body_tableTit">
            <p class="fw">服务名称</p>
            <p class="fb">发布用户</p>
            <p class="type">服务类型</p>
            <p class="success">成功成交数</p>
            <p class="xinyong">信用评价</p>
          </div>
          <div class="center_body_tableBody">
            <div
              class="center_body_tableBox"
              v-for="item in listData"
              :key="item.id"
            >
              <div class="center_by_tableBox_name">
                <p>{{ item.title }}</p>
              </div>
              <div class="center_by_tableBox_user">
                <img
                  :src="item.avatarUrl ? item.avatarUrl : 'src/images/mr.png'"
                  alt=""
                />
                <p>{{ item.orgName }}</p>
              </div>
              <div class="center_by_tableBox_type">
                <p>{{ item.serviceTypeName }}</p>
              </div>
              <div class="center_by_tableBox_success">
                <p>{{ item.totalDeal }}</p>
              </div>
              <div class="center_by_tableBox_evaluate">
                <p>{{ item.avgScore }}</p>
              </div>
            </div>
            <div class="center_body_tablePage">
              <div class="demo-pagination-block">
                <el-pagination
                  v-model:current-page="currentPage3"
                  v-model:page-size="pageSize3"
                  :background="true"
                  :total="listCount"
                  :page-count="listPage"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { Myrequest } from "../../network/index";
const input = ref("");
let listA = [
  {
    id: '',
    text: "不限",
  },
  {
    id: '097bcb6e056b65e386f5003fdbf0f1a9',
    text: "检验检测",
  },
  {
    id: '2143ad0137dedc22fec89feb0d501e2c',
    text: "研究开发",
  },
  {
    id: '35827270845eeb88e5411e3de30a2b9e',
    text: "科技金融",
  },
  {
    id: '484ff9b5e63cde7f4176cfac4c9750bc',
    text: "科技咨询",
  },
  {
    id: '5c8f1cf88cd4b45affdb62a809fa92d6',
    text: "技术转移",
  },
  {
    id: 'a56c39fe64656fdf2df7c9bada5712fd',
    text: "知识产权",
  },
  {
    id: 'b413c82dcd3f8cd1ffbc32cdff7be4e0',
    text: "科学技术普及",
  },
  {
    id: 'c01bdbcf2f40ce5a20a8ef1f4543911d',
    text: "综合科技服务",
  },
  {
    id: 'cf46ffa7c6b9e17dd379c4c0969a580f',
    text: "创业孵化",
  },
];
let listB = [
  {
    id: '',
    text: "不限",
  },
  {
    id: '29056a0eee037b4dd9b1c59b1bab8aff',
    text: "现代农业",
  },
  {
    id: '5e79b1151fb70242bd5d3f85b3ef1f90',
    text: "电子信息",
  },
  {
    id: '66f8ee9b8d7b87ccc2f52378803239d2',
    text: "资源与环境",
  },
  {
    id: '853f8b238a01b01811a3cb0871290284',
    text: "生物与新医药",
  },
  {
    id: 'c2b1d0591cd01ebfac3f0cf4ddcbc42a',
    text: "新材料",
  },
  {
    id: 'cc02ad4ab5bc099f3b3c68a493f0ec22',
    text: "高技术服务",
  },
  {
    id: 'cf1acd5f304d09a20ea1003f48dd338e',
    text: "航空航天",
  },
  {
    id: 'd14cf608d101f2ccb256a2fee9091436',
    text: "新能源与节能",
  },
  {
    id: 'd58a6dc233fd1d3d751ca7d3eba1690c',
    text: "建筑业",
  },
  {
    id: 'd6277b61b9aab493e532fd4790126a04',
    text: "先进自动与制动化",
  },
  {
    id: '6254a2cf3348ff21ad6c86b6d67471db',
    text: "其他",
  },
];
let listC= [
  {
    id: '',
    text: "不限",
  },
  {
    id: 'nttcc',
    text: "共创云",
  },
  {
    id: '51kehui',
    text: "柯惠网",
  },
  {
    id: 'jxstc',
    text: "江西省网上常设技术市场",
  },
  {
    id: 'hntpe',
    text: "潇湘科技要素大市场",
  },
];
let listD = [
  {
    id: '',
    text: "不限",
  },
  {
    id: 2,
    text: "湖北省",
  },
  {
    id: 3,
    text: "湖南省",
  },
  {
    id: 4,
    text: "江西省",
  },
  {
    id: 5,
    text: "北京市",
  },
  {
    id: 6,
    text: "天津市",
  },
  {
    id: 7,
    text: "河北省",
  },
  {
    id: 8,
    text: "山西省",
  },
  {
    id: 9,
    text: "内蒙古自治区",
  },
  {
    id: 10,
    text: "辽宁省",
  },
  {
    id: 11,
    text: "吉林省",
  },
  {
    id: 12,
    text: "黑龙江省",
  },
  {
    id: 13,
    text: "上海市",
  },
  {
    id: 14,
    text: "江苏省",
  },
  {
    id: 15,
    text: "浙江省",
  },
  {
    id: 16,
    text: "安徽省",
  },
  {
    id: 17,
    text: "福建省",
  },
  {
    id: 18,
    text: "山东省",
  },
  {
    id: 19,
    text: "河南省",
  },
  {
    id: 20,
    text: "广东省",
  },
  {
    id: 21,
    text: "广西壮族自治区",
  },
  {
    id: 22,
    text: "海南省",
  },
  {
    id: 23,
    text: "重庆市",
  },
  {
    id: 24,
    text: "四川省",
  },
  {
    id: 25,
    text: "四川省",
  },
  {
    id: 26,
    text: "贵州省",
  },
  {
    id: 27,
    text: "云南省",
  },
  {
    id: 28,
    text: "西藏自治区",
  },
  {
    id: 29,
    text: "陕西省",
  },
  {
    id: 30,
    text: "甘肃省",
  },
  {
    id: 31,
    text: "青海省",
  },
  {
    id: 32,
    text: "宁夏回族自治区",
  },
  {
    id: 33,
    text: "新疆维吾尔自治区",
  },
  {
    id: 34,
    text: "台湾省",
  },
  {
    id: 35,
    text: "香港特别行政区",
  },
  {
    id: 36,
    text: "澳门特别行政区",
  },
];
const listData = ref([]);
const listPage = ref();
const listCount = ref();
const activeFW = ref(0);
const activeJS = ref(0);
const activeSJ = ref(0);
const activeaddress = ref(0);
// 服务类型
const ActiveList = ref(false);
// 技术领域
const ActiveListB = ref(false);
// 数据来源
const ActiveListC = ref(false);
// 地区
const ActiveListD = ref(false);
const bindBlock = (num) => {
  console.log(num);
  switch (num) {
    case 1:
      ActiveList.value = true;
      break;
    case 2:
      ActiveListB.value = true;
      break;
    case 3:
      ActiveListC.value = true;
      break;
    case 4:
      ActiveListD.value = true;
      break;
  }
};
const bindNone = (num) => {
  switch (num) {
    case 1:
      ActiveList.value = false;
      break;
    case 2:
      ActiveListB.value = false;
      break;
    case 3:
      ActiveListC.value = false;
      break;
    case 4:
      ActiveListD.value = false;
      break;
  }
};
const currentPage3 = ref(1);
const pageSize3 = ref(10);

const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  console.log("c");
  Myrequest("get", "/api/v1/service/list", {
    pageNum: val,
    pageSize: pageSize3.value,
    logicStatus: 1,
    keywords: input.value,
    serviceTypeId:serviceTypeId.value,
    technicalId:technicalId.value,
    dataOrigin:dataOrigin.value,
    province:province.value
  }).then((res) => {
    listData.value = res.data.list;
    currentPage3.value = res.currentPage;
    listPage.value = res.data.lastPage;
    listCount.value = res.data.total;
  });
};
const bindSearch = () => {
  Myrequest("get", "/api/v1/service/list", {
    pageNum: 1,
    pageSize: pageSize3.value,
    logicStatus: 1,
    keywords: input.value,
  }).then((res) => {
    listData.value = res.data.list;
    listPage.value = res.data.lastPage;
    currentPage3.value = 1;
  });
};
const serviceTypeId = ref();
const technicalId = ref();
const dataOrigin = ref();
const province = ref();
const bindFW = (id,index) =>{
  console.log(id);
  activeFW.value = index
  if(id===1){
    serviceTypeId.value = ''
  }
  serviceTypeId.value = id
  Myrequest("get", "/api/v1/service/list", {
    pageNum: 1,
    pageSize: pageSize3.value,
    logicStatus: 1,
    keywords: input.value,
    serviceTypeId:serviceTypeId.value,
    technicalId:technicalId.value,
    dataOrigin:dataOrigin.value,
    province:province.value
  }).then((res) => {
    listData.value = res.data.list;
    currentPage3.value = res.currentPage;
    listPage.value = res.data.lastPage;
    listCount.value = res.data.total;
  });
}
const bindJS = (id,index)=>{
  activeJS.value = index
  if(id===1){
    serviceTypeId.value = ''
  }
  technicalId.value = id
  Myrequest("get", "/api/v1/service/list", {
    pageNum: 1,
    pageSize: pageSize3.value,
    logicStatus: 1,
    keywords: input.value,
    serviceTypeId:serviceTypeId.value,
    technicalId:technicalId.value,
    dataOrigin:dataOrigin.value,
    province:province.value
  }).then((res) => {
    listData.value = res.data.list;
    currentPage3.value = res.currentPage;
    listPage.value = res.data.lastPage;
    listCount.value = res.data.total;
  });
}
const bindSJ = (id,index) =>{
  activeSJ.value = index
  if(id===1){
    serviceTypeId.value = ''
  }
  dataOrigin.value = id
  Myrequest("get", "/api/v1/service/list", {
    pageNum: 1,
    pageSize: pageSize3.value,
    logicStatus: 1,
    keywords: input.value,
    serviceTypeId:serviceTypeId.value,
    technicalId:technicalId.value,
    dataOrigin:dataOrigin.value,
    province:province.value
  }).then((res) => {
    listData.value = res.data.list;
    currentPage3.value = res.currentPage;
    listPage.value = res.data.lastPage;
    listCount.value = res.data.total;
  });
}
const bindAddress = (address,index) =>{
  activeaddress.value = index
  province.value = address
  Myrequest("get", "/api/v1/service/list", {
    pageNum: 1,
    pageSize: pageSize3.value,
    logicStatus: 1,
    keywords: input.value,
    serviceTypeId:serviceTypeId.value,
    technicalId:technicalId.value,
    dataOrigin:dataOrigin.value,
    province:province.value
  }).then((res) => {
    listData.value = res.data.list;
    currentPage3.value = res.currentPage;
    listPage.value = res.data.lastPage;
    listCount.value = res.data.total;
  });
}

function Refresh() {
  Myrequest("get", "/api/v1/service/list", {
    pageNum: 1,
    pageSize: pageSize3.value,
    logicStatus: 1,
  }).then((res) => {
    listData.value = res.data.list;
    currentPage3.value = res.currentPage;
    listPage.value = res.data.lastPage;
    listCount.value = res.data.total;
  });
}

onMounted(() => {
  Refresh();
});
</script>
<style lang="scss">
.nav {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 1px 5px rgba($color: #000000, $alpha: 0.1);
  background: #fff;
  .nav_body {
    width: 1200px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    .nav_left {
      width: 40%;
      height: 100%;
      display: flex;
      align-items: center;
      .nav_left_logo {
        display: flex;
        align-items: center;
        h1 {
          font-size: 15px;
          color: #3473e6;
          margin-left: 5px;
        }
      }
      .nav_left_list {
        ul {
          display: flex;
          margin-left: 30px;
          li {
            margin-left: 20px;
            font-size: 13px;
            color: #606266;
          }
        }
      }
    }
    .nav_right {
      width: 15%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.center {
  width: 100%;
  display: flex;
  justify-content: center;
  .center_body {
    width: 1200px;
    padding: 20px;
    background-color: #fff;
    margin-top: 30px;
    box-shadow: 1px 1px 5px rgba($color: #000000, $alpha: 0.1);
    border-radius: 10px;
    .center_body_search {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;
      .center_by_searchLeft {
        height: 100%;
        display: flex;
        align-items: center;
        img {
          margin-right: 10px;
        }
      }
      .center_by_searchRight {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        .el-input {
          height: 45px;
          border-top-right-radius: none;
          border-bottom-right-radius: none;
        }
        button {
          width: 120px;
          height: 45px;
          margin-left: -10px;
          z-index: 9;
        }
      }
    }
    .center_body_nav {
      width: 100%;
      height: 60px;
      background-color: #f7f8f9;
      display: flex;
      align-items: center;
      padding-left: 60px;
      border-radius: 10px;
      p {
        display: inline-block;
        color: #3473e6;
        border-bottom: 3px solid #3473e6;
        width: 50px;
        height: 30px;
        text-align: center;
      }
    }
    .center_body_list {
      width: 100%;
      border: 1px solid #dcdfe6;
      margin-top: 30px;
      border-radius: 10px;
      padding: 20px 25px;
      .center_body_listA {
        border-bottom: 2px dotted #dcdfe6;
        display: flex;
        height: 40px;
        overflow: hidden;
        margin-bottom: 20px;
        .center_body_listA_tit {
          width: 10%;
          height: 40px;
          display: flex;
          align-items: center;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin-left: 40px;
          width: 100%;
          height: 40px;
          margin-right: 90px;
          flex: 1;
          li {
            line-height: 20px;
            padding: 12px 10px;
            margin-right: 10px;
            border-radius: 2px;
            color: #303133;
            cursor: pointer;
            font-size: 13px;
          }
          .activeCss{
            background-color:#3473e6 ;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .center_body_listA_gengduo {
          height: 40px;
          display: flex;
          align-items: center;
          cursor: pointer;
        }
      }
      .center_body_listA_Active {
        border-bottom: 2px dotted #dcdfe6;
        display: flex;
        height: 90px;
        overflow: hidden;
        .center_body_listA_tit {
          width: 10%;
          height: 40px;
          display: flex;
          align-items: center;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin-left: 40px;
          width: 100%;
          height: 40px;
          margin-right: 90px;
          flex: 1;
          li {
            line-height: 20px;
            padding: 12px 10px;
            margin-right: 10px;
            border-radius: 2px;
            color: #303133;
            cursor: pointer;
            font-size: 13px;
          }
          .activeCss{
            background-color:#3473e6 ;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .center_body_listA_gengduo {
          height: 40px;
          display: flex;
          align-items: center;
          cursor: pointer;
        }
      }
      .center_body_listB {
        border-bottom: 2px dotted #dcdfe6;
        display: flex;
        height: 40px;
        overflow: hidden;
        margin-bottom: 20px;
        .center_body_listA_tit {
          width: 10%;
          height: 40px;
          display: flex;
          align-items: center;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin-left: 40px;
          width: 100%;
          height: 40px;
          margin-right: 90px;
          flex: 1;
          li {
            line-height: 20px;
            padding: 12px 10px;
            margin-right: 10px;
            border-radius: 2px;
            color: #303133;
            cursor: pointer;
            font-size: 13px;
          }
          .activeCss{
            background-color:#3473e6 ;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .center_body_listA_gengduo {
          height: 40px;
          display: flex;
          align-items: center;
          cursor: pointer;
        }
      }
      .center_body_listB_Active {
        border-bottom: 2px dotted #dcdfe6;
        display: flex;
        height: 200px;
        overflow: hidden;
        .center_body_listA_tit {
          width: 10%;
          height: 40px;
          display: flex;
          align-items: center;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin-left: 40px;
          width: 100%;
          height: 40px;
          margin-right: 90px;
          flex: 1;
          li {
            line-height: 20px;
            padding: 12px 10px;
            margin-right: 10px;
            border-radius: 2px;
            color: #303133;
            cursor: pointer;
            font-size: 13px;
          }
          .activeCss{
            background-color:#3473e6 ;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .center_body_listA_gengduo {
          height: 40px;
          display: flex;
          align-items: center;
          cursor: pointer;
        }
      }
    }
    .center_body_table {
      width: 100%;
      margin-top: 30px;
      .center_body_tableTit {
        width: 100%;
        height: 50px;
        background-color: #f7f8f9;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
        font-size: 15px;
        .fw {
          flex: 420px;
        }
        .fb {
          flex: 440px;
        }
        .type {
          flex: 300px;
        }
        .success {
          flex: 200px;
        }
        .xinyong {
          flex: 100px;
        }
      }
      .center_body_tableBody {
        width: 100%;
        margin-top: 20px;
        .center_body_tableBox {
          width: 100%;
          height: 80px;
          border: 2px solid #f7f8f9;
          border-radius: 4px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 30px;
          .center_by_tableBox_name {
            flex: 1 1 420px;
          }
          .center_by_tableBox_user {
            display: flex;
            align-items: center;
            flex: 1 1 440px;
            img {
              width: 40px;
              height: 40px;
              margin-right: 10px;
            }
            // justify-content: center;
          }
          .center_by_tableBox_type {
            text-align: center;
            flex: 1 1 300px;
          }
          .center_by_tableBox_success {
            text-align: center;
            margin-right: 70px;
            flex: 1 1 200px;
          }
          .center_by_tableBox_evaluate {
            text-align: center;
            flex: 1 1 180px;
          }
        }
        .center_body_tablePage {
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 30px;
        }
      }
    }
  }
}
</style>